<template>
  <div @click="clickGrandfather">
    这是祖先元素
    <div @click.self="clickFather">
        这是父元素
        <div @click="clickChild">
            这是子元素
        </div>
    </div>
  </div>
</template>

<script setup>
    const clickGrandfather = () => {
        console.log('祖先元素被点击了')
    }

    const clickFather = () => {
        console.log('父元素被点击了')
    }

    const clickChild = () => {
        console.log('子元素被点击了')
    }
</script>

<style>

</style>